<template>
	<div id="root000" class="container">

		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<nav>
			<router-link to="/">Home</router-link> |
			<router-link to="/about">About</router-link> |
			<router-link to="/aboutVueHtml2Pdf">导出<span style="color:red;">(beta)</span></router-link> |
			<router-link to="/vueHtml2Pdf">vueHtml2Pdf</router-link> |
			<span @click="exportPdf()" style="cursor: pointer;text-decoration:underline">导出PDF</span>
		</nav>
		<router-view />
	</div>
</template>
<script lang="ts" setup>
	import htmlToPdf from '@/components/htmlToPdf'
	function exportPdf() {
		if (confirm("确认导出pdf?")) {
			const dom : HTMLElement = <HTMLElement>document.getElementById("root000");
			htmlToPdf.htmlToPdf('test', dom);
		} else {
			alert("已取消")
		}
	}
</script>
<style lang="scss">
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	nav {
		padding: 30px;

		a {
			font-weight: bold;
			color: #2c3e50;

			&.router-link-exact-active {
				color: #42b983;
			}
		}
	}
</style>